<template>
	<view>
		<view class="shopping_trolley">
			<view class="search">
				<view class="search_container">
					<image class="search_icon" @tap="onSearch" src="/static/pages/image/search_icon.png" mode="widthFix">
					</image>
					<input class="search_input" @input="bindKeyInput" @blur="onSearch" placeholder="请输入搜索内容" :value="search"
						placeholder-style="color: #ACACAC;">
				</view>
			</view>
		
			<view class="good_list">
				<view class="item" v-for="item in good_list" :key="item.id" @click="onChangeActive(item)">
					<view class="item_chck">
						<image v-if="item.isChcked" class="right_img" src="/static/pages/image/chcked.png"></image>
						<view v-else class="right_round"></view>
					</view>
					<image class="item_iamge" @click.stop="toDetails(item.goods_id)" :src="getImages(item.image)" mode=""></image>
					<view class="item_conetnt" @click.stop="toDetails(item.goods_id)">
						<text class="item_title">{{item.title}}</text>
						<view class="item_parmas">{{item.parm.name}}</view>
						<view class="item_footer">
							<view class="box_money">
								<text class="money_symbol">¥</text>
								<text class="money_txt">{{filter.getPriceIntegr(item.parm.param_price)}}</text>
								<text class="money_decimal">.{{filter.getPriceDecimals(item.parm.param_price)}}</text>
							</view>
							<uni-number-box @change="bindChange($event,item)" v-model="item.sum" :min="0"></uni-number-box>
						</view>
					</view>
				</view>
			</view>
			
			<load-more :load="load" @onMore="onMore"></load-more>
		
			<view class="footer">
				<view class="left">
					<text class="left_txt">共{{getChckedGood()}}件</text>
					<view class="box_money">
						<text class="total">合计</text>
						<text class="money_symbol">¥</text>
						<text class="money_txt">{{filter.getPriceIntegr(totalMoney)}}</text>
						<text class="money_decimal">.{{filter.getPriceDecimals(totalMoney)}}</text>
					</view>
				</view>
				<view class="pay" @click="toPay">
					立即支付
				</view>
			</view>
		</view>
		<view-tabbar :current="3"></view-tabbar>
	</view>
	
</template>

<script module="filter" lang="wxs" src="../../we7/resource/js/tools.wxs"></script>
<script>
	import UniNumberBox from '../../components/uni-number-box/uni-number-box.vue'
	import loadMore from "../../components/load-more/load-more";
		var app = getApp();
		import Tabbar from '@/pagesA/tabber/tabber.vue'
	export default {
		components: {
			UniNumberBox,
			loadMore,
			'view-tabbar': Tabbar
		},
		data() {
			return {
				isActive: 0,
				number: 0,
				good_list: [],
				// loading noMore more
				load: 'noMore',
				pageNum:1,
				totalMoney:'0.00',
				active_item:{}
			}
		},
		computed:{},
		onLoad() {
			this.load = 'more'
			this.pageNum =  1
			this.good_list = []
			this.getList()
		},
		methods: {	
			getImages(images){
				let str = ''
				if(images){
					str = JSON.parse(images)[0]
				} 
				return str
			},
			// 详情
			toDetails(id) {
				uni.navigateTo({
					url: '/pagesA/productDetails/productDetails?id=' + id
				});
			},
			getChckedGood(){
				let length = 0
				this.good_list.forEach(item=>item.isChcked == 1? length += 1 : null)
				return length
			},
			onCountTotalMoney(){
				let nums = this.good_list.map(item=> item.isChcked == 1 ? Number(item.parm.param_price) * item.sum : 0)
				this.totalMoney = this.sum(nums)
			},
			sum(arr) {
			    let num = arr.reduce(function(prev, curr, idx, arr){
			        return prev + curr;
			    });
				return num.toFixed(2)
			},
			bindChange(val,item){
				item.sum = val
				this.onCountTotalMoney()
			},
			toPay(){
				let parmas = []
				this.good_list.forEach(item=>{
					if(item.isChcked == 1 && item.sum >= 1){
						parmas.push({
							details:item,
							parm:item.parm,
							sum:item.sum,
							total_money: (item.sum * item.parm.param_price).toFixed(2)
						})
					}
				})
				if(parmas.length){
					wx.navigateTo({
						url: '/pagesA/orders/orders?parmas=' + JSON.stringify(parmas) + '&type=1'
					});
				}
			},
			onChangeActive(item){
				// this.active_item = item
				item.isChcked = item.isChcked == 1 ? 0 : 1
				this.onCountTotalMoney()
				this.$forceUpdate()
				// this.totalMoney = (item.sell_price * item.sum).toFixed(2)
				// this.isActive = item.id
			},
			onMore() {
				if (this.load != 'more') return;
				this.getList();
			},
			getList(){
				this.load = 'loading'
				wx.showLoading({
					title: '加载中'
				});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "member.index.cart_list",
						uid: wx.getStorageSync('uid'),
						leftid: this.pageNum
					},
					success: res => {
						let load = 'more';
						if (res.data.data.length < 6) load = 'noMore';
						this.load = load
						this.pageNum =  this.pageNum + 1
						this.good_list = this.good_list.concat(res.data.data)
						this.good_list.forEach(item=>item.isChcked = 0)
						wx.hideLoading();
					},
					fail: res => {
						wx.hideLoading();
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.shopping_trolley {

		.search {
			background: #FFFFFF;
			padding: 32rpx 32rpx 45rpx 28rpx;
			box-sizing: border-box;
		}

		.search_container {
			width: 100%;
			height: 60rpx;
			background: #F1F2F2;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			padding: 12rpx 25rpx;
			box-sizing: border-box;
		}

		.search_icon {
			width: 27rpx;
			margin-right: 13rpx;
		}

		.search_input {
			flex: 1;
			border-left: 3rpx solid rgba(0, 0, 0, 0.10);
			padding: 0 13rpx;
			box-sizing: border-box;
			color: #B2B2B2;
		}

		.good_list {
			padding: 0 10rpx;
		}

		.item {
			display: flex;
			align-items: center;
			padding: 28rpx 16rpx 39rpx 20rpx;
			box-sizing: border-box;

			.item_chck {
				display: flex;
				align-items: center;
			}

			.right_img {
				width: 35rpx;
				height: 35rpx;
			}

			.right_round {
				width: 30rpx;
				height: 30rpx;
				border: 2rpx solid #C9CBCB;
				border-radius: 50%;
			}

			.item_iamge {
				margin: 0 21rpx;
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}

			.item_conetnt {
				flex: 1;
				.item_title{
					font-size: 30rpx;
					font-weight: 500;
					color: #444444;
				}
				
				.item_parmas{
					font-size: 22rpx;
					color: #444444;
				}
				
				.item_footer{
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 140upx;
			left: 0;
			right: 0;
			height: 112rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;
				padding-left: 30rpx;
			}

			.left_txt {
				font-size: 25rpx;
				font-weight: 500;
				color: #979797;
				margin-right: 24rpx;
			}



			.pay {
				height: 100%;
				width: 233rpx;
				background: #0BC2AE;
				font-size: 33rpx;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.box_money {
		color: #FF4E31;
	}

	.total {
		color: #333333;
	}

	.box_money .money_symbol {
		font-size: 28rpx;
	}

	.box_money .money_txt {
		font-size: 35rpx;
	}

	.box_money .money_decimal {
		font-size: 26rpx;
	}
</style>
